<template>
  <div>
    <video
      class="video-js"
      ref="videoPlayer"
      id="videoPlayer"
      style="width: 100%; height: 100%"
      v-if="visible"
    ></video>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.min.css";
export default {
  name: "VideoDialog",
  data() {
    return {
      visible: true,
      options: {
        autoplay: true,
        controls: true,
        fluid: true,
        aspectRatio: "16:9",
        language: "zh-CN",
        techOrder: ["html5"],
        sourceOrder: true,
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        sources: [
          {
            withCredentials: false,
            type: "application/x-mpegURL",
            src:
              "https://hls01open.ys7.com/openlive/2dd9d423c7d5439ba071a2a170e7b708.m3u8"
          }
        ]
      }
    };
  },
  mounted() {
    setTimeout(() => {
      this.$nextTick(() => {
        this.initVideo();
      }, 300);
    });
  },
  methods: {
    initVideo() {
      let fileName = this.options.sources[0].src
        .split(".")
        .pop()
        .toLowerCase();
      if (fileName && fileName === "mp4") {
        this.options.sources[0].type = "";
      } else {
        this.options.sources[0].type = "application/x-mpegURL";
      }
      this.player = videojs(
        this.$refs.videoPlayer,
        this.options,
        function onPlayerReady() {}
      );
    }
  }
};
</script>
